#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .page-container {
    width: 100%;
    flex-shrink: 1;
    flex-grow: 1;
    overflow-y: scroll;
  }
}

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

/* ********************************* 通用flex布局 ********************************* */
/* flex容器样式，子元素横向排列，垂直方向居中，水平方向子元素space-between */
.flex-row-sb {
	display: flex;
  justify-content: space-between;
  align-items: center;
}
/* flex容器样式，子元素横向排列，垂直方向居中，水平方向子元素space-around */
.flex-row-sa {
	display: flex;
  justify-content: space-around;
  align-items: center;
}
/* flex容器样式，子元素横向排列，垂直方向居中，水平方向子元素聚中靠拢 */
.flex-row-center {
	display: flex;
  justify-content: center;
  align-items: center;
}
/* flex容器样式，子元素横向排列，垂直方向居中，水平方向子元素聚左靠拢 */
.flex-row-left {
	display: flex;
  justify-content: flex-start;
  align-items: center;
}
/* flex容器样式，子元素横向排列，垂直方向居中，水平方向子元素聚右靠拢 */
.flex-row-right {
	display: flex;
  justify-content: flex-end;
  align-items: center;
}
/* flex容器样式，子元素纵向排列，水平方向居中，垂直方向子元素space-between */
.flex-column-sb {
	display: flex;
	flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
/* flex容器样式，子元素纵向排列，水平方向居中，垂直方向子元素space-around */
.flex-column-sa {
	display: flex;
	flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
/* flex容器样式，子元素纵向排列，水平方向居中，垂直方向子元素聚中靠拢 */
.flex-column-center {
	display: flex;
	flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* flex容器样式，子元素纵向排列，水平方向居中，垂直方向子元素聚上靠拢 */
.flex-column-top {
	display: flex;
	flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
/* flex容器样式，子元素纵向排列，水平方向居中，垂直方向子元素聚下靠拢 */
.flex-column-bottom {
	display: flex;
	flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
// 阻止flex子元素自适应伸缩
.flex-block {
  flex-shrink: 0;
  flex-grow: 0;
}
// flex子元素自适应伸缩
.flex-auto {
  flex-shrink: 1;
  flex-grow: 1;
}

/* ********************* 图片裁切（搭配flex系列样式食用更佳） ********************* */
/* 图片宽度铺满 */
.fimg {
  overflow: hidden;
  > img {
    width: 100%;
  }
}
/* 图片高度铺满 */
.fimg-d {
  overflow: hidden;
  > img {
    height: 100%;
  }
}

/* ********************************* 图片背景通用样式 ********************************* */
.back-row-c {
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.back-column-c {
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

/* ********************************* 通用行数限制 ********************************* */
.text-of-1 {
	text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.text-of-2 {
	overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp:2;
  word-break:break-all;
  display:-webkit-box;
  -webkit-box-orient:vertical;
}
.text-of-3 {
	overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp:3;
  word-break:break-all;
  display:-webkit-box;
  -webkit-box-orient:vertical;
}
.text-of-4 {
	overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp:4;
  word-break:break-all;
  display:-webkit-box;
  -webkit-box-orient:vertical;
}
.text-of-5 {
	overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp:5;
  word-break:break-all;
  display:-webkit-box;
  -webkit-box-orient:vertical;
}

/* ********************************* 全局通用样式 ********************************* */
/* 隐藏类 */
.hide {
	display: none;
}
/* 完全平铺 */
.abs-full {
	position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

/* 定位 */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

// 元素禁用并置灰
.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.3;
}
